<!doctype html>
<html lang="en">
{% load static %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市智能交通分析系统</title>
    <!-- css样式 -->
    <link type="text/css" rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="../static/css/sideBar.css">
    <link type="text/css" rel="stylesheet" href="../static/css/city_plan.css">
    <link type="text/css" rel="stylesheet" href="../static/font-awesome/css/font-awesome.css" />
    <link href="../static/css/ol.css" rel="stylesheet" />
    <!-- js样式 -->
    <script type="text/javascript" src="{%static 'js/jquery-3.4.1.js'%}"></script>
    <script type="text/javascript" src="{%static 'bootstrap/js/bootstrap.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/ol.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/AjaxCityPlan.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/turf.min.js'%}"></script>
</head>

<body class>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="sidebar" style="background:#cfebf1">
				<h4 style="background:#8cb9c4; color: black; text-align: center; font-size:x-large;font-family:华文彩云">驾驶辅助决策系统</h4>
				<div class="cover" style="background:#68cae2; color:rgb(255, 255, 255)">
					<h2><img class="img-circle" src="../static/img/car.png" /></h2>
					<b style="color: black;">Hi~ 小主</b>
				</div>
				<ul class="sidenav animated fadeInUp">
					<!-- 一级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-user-circle" aria-hidden="true"></i>
							<span class="sidespan">司机辅助系统</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown" >
							<li>
								<a id='route_plan' class="withripple" style="background:#68cae2;  color:black ">路径规划
								</a>
							</li>
						</ul>
					</li>
					<!-- 二级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-taxi" aria-hidden="true"></i>
							<span class="sidespan">区域综合分析</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="hotpot_zone_analysis" class="withripple" style="background:#afd9e4; color:black">热点区域分析
								</a>
							</li>
							<li>
								<a id="network_module" class="withripple" style="background:#afd9e4;  color:black ">网络社区模块
								</a>
							</li>
						</ul>
					</li>
					<!-- 三级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-rocket" aria-hidden="true"></i>
							<span class="sidespan">城市辅助决策</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="city_plan_analysis" class="withripple" style="background:#68cae2;  color:black ">上下车点周围查询
								</a>
							</li>
							<li>
								<a id="traffic_jam" class="withripple" style="background:#68cae2;  color:black ">拥堵路段分析
								</a>
							</li>
						</ul>
					</li>
					<!-- 四级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-truck" aria-hidden="true"></i>
							<span class="sidespan">司机情况概览</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="track_recall" class="withripple" style="background:#afd9e4;  color:black ">危险驾驶行为回溯</a>
							</li>

						</ul>
					</li>
				</ul>
			</div>
            <!-- 主体部分  -->
            <div class="main">
                <!-- 上方标题 -->
                <div class="main-title">
                    <!-- 左侧下拉框 -->
                    <ul class="nav navbar-nav navbar-left navbar-side">
                        <li>
                            <a href="">
                                <i class="fa fa-sliders" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- 右侧下拉框 -->
                    <ul class="nav-right navbar-nav navbar-left navbar-side-right">
                        <li>
                            <a href="">
                                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 右侧参数设置 -->
                <div class="sidebarright" style="background:#cfebf1">
                    <h4 style="text-align: center; background: #5ec4dd;" >参数设置</h4>
                    <button type="button" class="btn btn-success btn-group btn-group-justified"
                        onclick="AjaxCityPlan();">显示上下车点</button>
                    <br />
                    <button type="button" class="btn btn-info btn-group btn-group-justified">POI信息表</button>
                    <br />
                    <div id='main'
                        style="width: 210px;height:500px;;background-color: rgb(62, 150, 172);margin-left: 0px;overflow: auto">
                        <table id="POItable" border="1">
                            <tr>
                                <th width="110" height="50" style="text-align: center;">POI点类型</th>
                                <th width="110" height="50" style="text-align: center;">POI点名称</th>
                            </tr>
                            <tbody id="tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 右侧框架 -->
                <div id="right_frame" style="background:#000080; color:rgb(190, 53, 53)">
                    <div id="map" style="width: 140%;height: 1000px;overflow: hidden;"></div>

                    <!-- 弹框显示 -->
                    <div id="popup" class="ol-popup" style="visibility: hidden">
                        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                        <div id="popup-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{%static 'js/sideBar.js'%}"></script>
</body>
<script type="text/javascript">
    var localhost = '172.16.5.236'
    $("#route_plan").attr("href", "http://" + localhost + ":8000/web/route/");
    $("#hotpot_zone_analysis").attr("href", "http://" + localhost + ":8000/web/hotpot/")
    $("#network_module").attr("href", "http://" + localhost + ":8000/web/network/")
    $("#city_plan_analysis").attr("href", "http://" + localhost + ":8000/web/cityplan/")
    $("#traffic_jam").attr("href", "http://" + localhost + ":8000/web/traffic/")
    $("#track_recall").attr("href", "http://" + localhost + ":8000/web/trackrecall")
    $("#driving_feature").attr("href", "http://" + localhost + ":8000/web/drivingfeature/")
    //底图
    var buffer = new ol.layer.Vector();
    var source_buffer = new ol.source.Vector();
    var POI_vector = new ol.layer.Vector();
    var poi_features;
    var buffered;
    var b;
    var poi_choose_layer = new ol.layer.Vector();
    var POI_choose = new ol.source.Vector();
    var POInumber = new Array();
    var POIin = new Array(); //一个由布尔型数值组成的arrray
    var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    });
    var map = new ol.Map({
        layers: [raster],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([114.37, 30.55]),
            zoom: 12
        })
    });
    //矢量POI图层
    var t = "{{POI_url}}";
    var POI_url = t.replace(/amp;/g, '');
    //console.log(POI_url)
    POI_source = new ol.source.Vector({
        projection: 'EPSG:3857',
        url: POI_url,
        format: new ol.format.GeoJSON()
    });
    POI_vector = new ol.layer.Vector({
        source: POI_source,
        style: new ol.style.Style({
            image: new ol.style.Icon({
                src: '../static/img/POI.svg', //图标路径
                anchor: [0.5, 1], //锚点
                scale: 0.6, //大小
                rotation: 0, //旋转角度
            })
        }),
        zIndex: 9999,
    });
    POI_vector.on('change', function (evt) {
        // 获取矢量图层数据源
        var source = evt.target.getSource();
        if (source.getState() === 'ready') {
            // 获取数据集
            poi_features = source.getFeatures();
        }
    })
    map.addLayer(POI_vector);
    //点击弹窗
    map.on('click', function (evt) {
        var pixel = map.getEventPixel(evt.originalEvent);
        var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
            return feature;
        }); //判断当前单击处是否有要素，捕获到要素时弹出popup
        //捕获到缓冲区时右边显示POI相关信息
        var coordinate = evt.coordinate;
        if (feature !== undefined) {
            removeAllOverlay(map);
            var popup_element = document.createElement('div');
            popup_element.className = 'ol-popup';
            var closer = document.createElement('a');
            closer.href = '#';
            closer.className = 'ol-popup-closer';
            var title = document.createElement('div');
            title.className = 'title';
            var content = document.createElement('div');
            content.className = 'popup-content';
            $(popup_element).append(closer);
            $(popup_element).append(title);
            $(popup_element).append(content);
            var info_popup = new ol.Overlay(({
                element: popup_element,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250 //当Popup超出地图边界时，地图移动的速度
                }
            }));
            map.addOverlay(info_popup);
            $(closer).on('click', function (event) {
                event.preventDefault();
                info_popup.setPosition(undefined);
            }); // 点击关闭的按钮
            var PickAndDrop = feature.get("pickAndDrop");
            var POIClass = feature.get("fclass");
            var POInumber = feature.get("POInumber");
            var POIin = feature.get("POIin")
            if (PickAndDrop !== undefined) {
                //此点为轨迹点K均值聚类中心点
                title.innerHTML = '<div><strong>这是一个轨迹K聚类中心点</strong>' + '</div></div>';
                content.innerHTML = '<div><div>上车点or下车点:' + PickAndDrop + '</div></div>';
                info_popup.setPosition(coordinate);
            }
            if (POIClass !== undefined) {
                //此时点为POI点，输出POI相关数据
                var fclass = feature.get("fclass");
                var name = feature.get("name");
                //向缓冲区内添加行
                title.innerHTML = '<div><strong>这是一个POI点</strong>' + '</div></div>';
                content.innerHTML = '<div><div>POI点类型:' + fclass + '</div><div>POI点名称:' + name + '</div></div>';
                info_popup.setPosition(coordinate);
            }
            if (POInumber !== undefined) {
                POI_choose.clear();
                title.innerHTML = '<div><strong>这是一个缓冲区</strong>' + '</div></div>';
                content.innerHTML = '<div><div>缓冲区内的POI点个数:' + POInumber + '</div></div>';
                //获得缓冲区内点，将所有缓冲区内的点添加进表格
                formReset(); //每次添加前清空表格
                for (var j = 0; j < POIin.length; j++) {
                    if (POIin[j] === true) {
                        var class0 = poi_features[j].get("fclass");
                        var name0 = poi_features[j].get("name");
                        createRow(class0, name0);
                        POI_choose.addFeature(poi_features[j]);
                    }
                }
                info_popup.setPosition(coordinate);
                poi_choose_layer = new ol.layer.Vector({
                    source: POI_choose,
                    style: new ol.style.Style({
                        image: new ol.style.Icon({
                            src: '../static/img/POI_choose.svg', //图标路径
                            anchor: [0.5, 1], //锚点
                            scale: 0.6, //大小
                            rotation: 0, //旋转角度
                        })
                    }),
                    zIndex: 10000,
                });
                map.addLayer(poi_choose_layer);
            }
        }
    }); //为map添加点击事件监听，弹出popup
</script>

</html>